<template>
  <el-tabs
    v-model="data.activeTab"
    class="demo-tabs"
    @tab-click="handleClickTab"
  >
    <el-tab-pane label="电站运营商" name="station">
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="edit-line"></div>
      <!-- <div class="card">
        <div class="icon-top"></div>
        <div class="card-content com-head-wrap1">
          <div class="card-data">
            <div class="card-item">
              <div class="right">
                <div class="title">充电业务</div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">充电电量（度）</div>
                <div class="title">
                  {{
                    data.detailData?.totalPower
                      ? formatNumber(data.detailData.totalPower)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">服务费（元）</div>
                <div class="title">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data.detailData.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">电费（元）</div>
                <div class="title">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data.detailData.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">订单金额（元）</div>
                <div class="title">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data.detailData.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">优惠抵扣（元）</div>
                <div class="title">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data.detailData.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="card-item">
              <div class="right">
                <div class="title">实收金额（元）</div>
                <div class="title">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data.detailData.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="icon-bottom"></div>
      </div> -->
      <!-- 超时占用版 -->
      <div class="line-card">
        <div class="right-card">
          <div class="dividend-title">
            <div class="title">充电业务</div>
          </div>
          <div class="charge-data">
            <div class="charge-data-item">
              <div class="charge-info">
                <div class="title">充电电量（度）</div>
                <div class="info">
                  {{
                    data.detailData.totalPower
                      ? formatNumber(data.detailData.totalPower)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">服 务 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalServiceMoney
                      ? formatNumber(data.detailData.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">电 费 （元）</div>
                <div class="info">
                  {{
                    data.detailData.totalElecMoney
                      ? formatNumber(data.detailData.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="charge-data-item charge-data-item1">
              <div class="charge-info">
                <div class="title">订单金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalAmount
                      ? formatNumber(data.detailData.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">优惠抵扣（元）</div>
                <div class="info">
                  {{
                    data.detailData.totalDiscounts
                      ? formatNumber(data.detailData.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">实收金额（元）</div>
                <div class="info">
                  {{
                    data.detailData.actualAmount
                      ? formatNumber(data.detailData.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-card">
          <div class="dividend-title">
            <div class="title">超时占用</div>
          </div>
          <div class="charge-info">
            <div class="title">订单计费（元）</div>
            <div class="info">
              {{
                data.detailData1.sumTotalAmount
                  ? formatNumber(data.detailData1.sumTotalAmount)
                  : '--'
              }}
            </div>
          </div>
          <div class="charge-info">
            <div class="title">实收金额（元）</div>
            <div class="info">
              {{
                data.detailData1.sumActualAmount
                  ? formatNumber(data.detailData1.sumActualAmount)
                  : '--'
              }}
            </div>
          </div>
        </div>
      </div>
      <Table
        ref="tableStationRef"
        v-show="data.activeTab === 'station'"
        :columns="data.columns"
        :toolbar="data.toolbar"
        @get-list="getData"
        :content="true"
      >
        <template #content>
          <el-table
            ref="table"
            :data="data.dataList"
            style="width: 100%"
            :max-height="540"
          >
            <template #empty>
              <div class="no-data-wrap">
                <div class="no-data"></div>
                <div class="text">暂无数据</div>
              </div>
            </template>
            <el-table-column
              width="60"
              type="index"
              label="序号"
              align="center"
              :index="indexMethod"
            />
            <!-- <el-table-column prop="operatorName" label="运营商名称" /> -->
            <el-table-column
              prop="operatorName"
              label="运营商名称"
              align="center"
            >
              <template #default="scope">
                <div class="linkColor" @click="linkStation(scope.row)">
                  {{ scope.row.operatorName || '--' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="channelName"
              label="平台运营商"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.channelName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="充电业务" align="center">
              <el-table-column
                prop="totalPower"
                label="充电电量（度）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalPower) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalElecMoney"
                label="电费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalElecMoney) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalServiceMoney"
                label="服务费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalServiceMoney) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                label="订单金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalAmount) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalDiscounts"
                label="优惠抵扣（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalDiscounts) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="actualAmount"
                label="实收金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.actualAmount) || '--' }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="超时占用" align="center">
              <el-table-column
                prop="occupyTotalAmount"
                label="订单计费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ scope.row.occupyTotalAmount || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="occupyActualAmount"
                label="实收金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ scope.row.occupyActualAmount || '--' }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </el-tab-pane>
    <el-tab-pane label="用户企业" name="order">
      <DateTab
        :tabData="data.formData"
        @data="getTab"
        @changeDate="getTab"
      ></DateTab>
      <div class="edit-line"></div>
      <div class="line-card">
        <div class="right-card right-card1">
          <div class="dividend-title">
            <div class="title">充电业务</div>
          </div>
          <div class="charge-data">
            <div class="charge-data-item">
              <div class="charge-info">
                <div class="title">充电电量（度）</div>
                <div class="info">
                  {{
                    data.order.totalPower
                      ? formatNumber(data.order.totalPower)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">服 务 费 （元）</div>
                <div class="info">
                  {{
                    data.order.totalServiceMoney
                      ? formatNumber(data.order.totalServiceMoney)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">电 费 （元）</div>
                <div class="info">
                  {{
                    data.order.totalElecMoney
                      ? formatNumber(data.order.totalElecMoney)
                      : '--'
                  }}
                </div>
              </div>
            </div>
            <div class="charge-data-item charge-data-item1">
              <div class="charge-info">
                <div class="title">订单金额（元）</div>
                <div class="info">
                  {{
                    data.order.totalAmount
                      ? formatNumber(data.order.totalAmount)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">优惠抵扣（元）</div>
                <div class="info">
                  {{
                    data.order.totalDiscounts
                      ? formatNumber(data.order.totalDiscounts)
                      : '--'
                  }}
                </div>
              </div>
              <div class="charge-info">
                <div class="title">实收金额（元）</div>
                <div class="info">
                  {{
                    data.order.actualAmount
                      ? formatNumber(data.order.actualAmount)
                      : '--'
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-card left-card1">
          <div class="dividend-title">
            <div class="title">超时占用</div>
          </div>
          <div class="charge-info">
            <div class="title">订单计费（元）</div>
            <div class="info">
              {{
                data.occupyData.sumTotalAmount
                  ? formatNumber(data.occupyData.sumTotalAmount)
                  : '--'
              }}
            </div>
          </div>
          <div class="charge-info">
            <div class="title">实收金额（元）</div>
            <div class="info">
              {{
                data.occupyData.sumActualAmount
                  ? formatNumber(data.occupyData.sumActualAmount)
                  : '--'
              }}
            </div>
          </div>
        </div>
        <div class="left-card left-card1">
          <div class="dividend-title">
            <div class="title">钱包余额（今日）</div>
          </div>
          <div class="charge-info">
            <div class="title">企业钱包（元）</div>
            <div class="info">
              {{
                data.todayData.unitBalance
                  ? formatNumber(data.todayData.unitBalance)
                  : '--'
              }}
            </div>
          </div>
          <div class="charge-info">
            <div class="title">个人钱包（元）</div>
            <div class="info">
              {{
                data.todayData.personalBalance
                  ? formatNumber(data.todayData.personalBalance)
                  : '--'
              }}
            </div>
          </div>
        </div>
      </div>
      <Table
        v-if="data.activeTab === 'order'"
        ref="tableRef"
        :columns="orderData.columns"
        :toolbar="orderData.toolbar"
        @get-list="getOrderData"
        :content="true"
      >
        <template #content>
          <el-table
            ref="table"
            :data="orderData.dataList"
            style="width: 100%"
            :max-height="540"
          >
            <template #empty>
              <div class="no-data-wrap">
                <div class="no-data"></div>
                <div class="text">暂无数据</div>
              </div>
            </template>
            <el-table-column
              width="60"
              type="index"
              label="序号"
              align="center"
              :index="indexMethod"
            />
            <el-table-column prop="orgName" label="企业名称" align="center">
              <template #default="scope">
                <div class="linkColor" @click="linkUser(scope.row)">
                  {{ scope.row.orgName || '--' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="channelName"
              label="平台运营商"
              align="center"
            >
              <template #default="scope">
                {{ scope.row.channelName || '--' }}
              </template>
            </el-table-column>
            <el-table-column label="充电业务" align="center">
              <el-table-column
                prop="totalPower"
                label="充电电量（度）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalPower) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalElecMoney"
                label="电费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalElecMoney) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalServiceMoney"
                label="服务费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalServiceMoney) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalAmount"
                label="订单金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalAmount) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="totalDiscounts"
                label="优惠抵扣（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.totalDiscounts) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="actualAmount"
                label="实收金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ String(scope.row.actualAmount) || '--' }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="钱包余额（今日）" align="center">
              <el-table-column
                prop="unitBalance"
                label="企业钱包余额（元）"
                align="center"
                width="150"
              >
                <template #default="scope">
                  {{ String(scope.row.unitBalance) || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="personalBalance"
                label="个人钱包余额（元）"
                align="center"
                width="150"
              >
                <template #default="scope">
                  {{ String(scope.row.personalBalance) || '--' }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="超时占用" align="center">
              <el-table-column
                prop="occupyTotalAmount"
                label="订单计费（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ scope.row.occupyTotalAmount || '--' }}
                </template>
              </el-table-column>
              <el-table-column
                prop="occupyActualAmount"
                label="实收金额（元）"
                align="center"
                width="130"
              >
                <template #default="scope">
                  {{ scope.row.occupyActualAmount || '--' }}
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </template>
      </Table>
    </el-tab-pane>
  </el-tabs>
</template>
    
<script lang="ts" setup name="financialOverviewList">
import Table from '@/components/table/index.vue';
import DateTab from '@/components/dateTab/index.vue';
import {
  pagingOperatorTotalInfo,
  pagingUserTotalInfo,
  getUserTotalInfo,
  getStationTotalInfo,
  getAccountBalance,
  EXPORT_OPERATORTOTALINFO,
  EXPORT_USERTOTALINFO,
  getOccupyTotalInfo,
  getOccupyUserTotalInfo,
} from '@/service/apis/financial';
import { formatNumber, exportFile } from '@/utils/utils';
import moment from 'moment';

const router = useRouter();

const tableRef = ref();
const tableStationRef = ref();
const page = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0,
});
const data = reactive({
  height: 56,
  dataList: [] as any,
  detailData: {} as any,
  detailData1: {} as any,
  order: {} as any,
  todayData: {} as any,
  occupyData: {} as any,
  activeTab: 'station',
  formData: {} as any,
  type: 1,
  columns: [
    {
      prop: 'operatorName',
      label: '运营商名称',
      clickFun: (row: any) => {
        if (row.operatorId) {
          if (row.operatorAttr == 1 || row.operatorAttr == 0) {
            router.push({
              name: 'stationFinancialDetail',
              query: { id: row.operatorId },
            });
          } else if (row.operatorAttr == 2) {
            router.push({
              // name: 'stationFinancialDetail',
              name: 'InteFinancialDetail',
              query: { id: row.operatorId, orgId: row.orgId },
            });
          }
        }
      },
    },
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'totalPower',
      label: '充电电量（度）',
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
    },
    {
      prop: 'totalAmount',
      label: '订单金额（元）',
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣（元）',
    },
    {
      prop: 'actualAmount',
      label: '实收金额（元）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_OPERATORTOTALINFO,
          '电站运营商财务概况',
          data.formData
        );
      },
    },
  ],
});
const orderData = reactive({
  dataList: [] as any,
  columns: [
    {
      prop: 'orgName',
      label: '企业名称',
      clickFun: (row: any) => {
        if (row.orgId) {
          console.log('formData====222==formData', data.formData);
          // 机构类型 1:车辆机构 2:流量方
          // if (row.orgType == 1) {
          router.push({
            name: 'financialDetail',
            query: { id: row.orgId },
          });
          // } else if (row.orgType == 2) {
          //   router.push({
          //     name: 'financialDetail',
          //     query: { id: row.orgId },
          //   });
          // }
        }
      },
    },
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'totalPower',
      label: '充电电量（度）',
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
    },
    {
      prop: 'totalAmount',
      label: '订单金额（元）',
    },
    {
      prop: 'totalDiscounts',
      label: '优惠抵扣（元）',
    },
    {
      prop: 'actualAmount',
      label: '实收金额（元）',
    },
    {
      prop: 'unitBalance',
      label: '企业钱包余额（元）',
    },
    {
      prop: 'personalBalance',
      label: '个人钱包余额（元）',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'financialOverviewList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(EXPORT_USERTOTALINFO, '企业用户财务概况', data.formData);
      },
    },
  ],
});

const tabRef = ref();

const handleClickTab = (e: any) => {
  console.log(e.props.name);
  data.formData.time = moment().format('YYYY-MM-DD');
  data.formData.timeType = 0;
  console.log('data.formData======', data.formData);
  if (e.props.name === 'station') {
    data.type = 1;
    // tableStationRef.value?.handleQuery();
    getTab(data.formData);
  } else {
    data.type = 0;
    // tableRef.value?.handleQuery();
    getTab(data.formData);
  }
};

const getTab = (value: any) => {
  console.log('value', value);
  console.log('tabRef=====', tabRef?.value);

  data.formData = Object.assign(data.formData, value);
  if (data.type === 0) {
    tableRef.value?.handleQuery();
  } else {
    tableStationRef.value?.handleQuery();
  }
};

const indexMethod = (index: number) => {
  return index + 1;
};

const getData = (page: any, search: any) => {
  const form = search.ruleForm;
  const tableData = Object.assign(form, { operatorGroup: 1 });
  data.formData = Object.assign(data.formData, tableData);
  pagingOperatorTotalInfo(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getData(page, search);
        return;
      }
      nextTick(() => {
        data.dataList = res.dataList;
        tableStationRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
  getStationTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData = res;
    } else {
      data.detailData = {};
    }
  });

  getOccupyTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.detailData1 = res;
    } else {
      data.detailData1 = {};
    }
  });
};

const getOrderData = (page: any, search: any) => {
  const form = search.ruleForm;
  const tableData = Object.assign(form, { orgGroup: 1 });
  data.formData = Object.assign(data.formData, tableData);
  pagingUserTotalInfo(data.formData, page).then((res: any) => {
    if (res) {
      if (page.pageNo !== 1 && (!res.dataList || res.dataList?.length === 0)) {
        page.pageNo--;
        getOrderData(page, search);
        return;
      }
      nextTick(() => {
        orderData.dataList = res.dataList;
        tableRef.value.setTable({
          total: res.totalCount,
          table: res.dataList,
        });
      });
    }
  });
  getUserTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.order = res;
    } else {
      data.order = {};
    }
  });
  getAccountBalance(null).then((res: any) => {
    if (res) {
      data.todayData = res;
    } else {
      data.todayData = {};
    }
  });
  getOccupyUserTotalInfo(data.formData).then((res: any) => {
    if (res) {
      data.occupyData = res;
    } else {
      data.occupyData = {};
    }
  });
};

const linkUser = (row: any) => {
  if (row.orgId) {
    // 机构类型 1:车辆机构 2:流量方
    if (row.orgType == 1) {
      router.push({
        name: 'financialDetail',
        query: {
          id: row.orgId,
          timeType: data.formData.timeType,
          time: data.formData.time,
        },
      });
    } else if (row.orgType == 2 || row.orgType == 4) {
      router.push({
        name: 'financialDetailFlow',
        query: {
          id: row.orgId,
          timeType: data.formData.timeType,
          time: data.formData.time,
          orgType: row.orgType,
        },
      });
    }
  }
};
const linkStation = (row: any) => {
  if (row.operatorId) {
    console.log('formData======formData', row.operatorAttr);
    if (
      row.operatorAttr == 1 ||
      row.operatorAttr == 0 ||
      row.operatorAttr == 2
    ) {
      router.push({
        name: 'stationFinancialDetail',
        query: {
          id: row.operatorId,
          timeType: data.formData.timeType,
          time: data.formData.time,
        },
      });
    } else if (row.operatorAttr == 3) {
      router.push({
        name: 'InteFinancialDetail',
        query: {
          id: row.operatorId,
          timeType: data.formData.timeType,
          time: data.formData.time,
          orgId: row.orgId,
          orgType: row.orgType,
        },
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
@import './index.scss';
</style>
